<!-- 2023年618活动规则弹窗组件 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup ref="popup">
    <div class="content">
      <div class="rule-box">
        <div class="title">
          活动规则
        </div>
        <rich-text
          class="rule-content"
          :nodes="rule"
          :selectable="false"
        />
      </div>
      <image
        class="close-btn"
        src="@/static/icons/common/close.png"
        @click="close"
      />
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { getCurrentInstance, onMounted } from 'vue';
import { useActivity618 } from '@/stores/activity-618-store';
// import { rule } from '@/static/constant/test.json'

const activity618Store = useActivity618();
const { getRule } = activity618Store;
const { rule } = storeToRefs(activity618Store);

/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/** 弹窗打开 */
const open = () => {
  console.log('open');
  const popup: any = currentInstance?.refs.popup;
  popup?.open();
};

/** 弹窗关闭 */
const close = () => {
  const popup: any = currentInstance?.refs.popup;
  popup?.close();
};

onMounted(() => {
  console.log('onMounted');
  getRule();
});

defineExpose({
  open,
  close,
});

</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .rule-box {
    width: 73.8462vw;
    height: 93.5897vw;
    overflow: scroll;

    background: linear-gradient(180deg, #fff, #ffecd0 100%);
    border-radius: 16px;

    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 4.359vw;
      color: #E86523;
    }
  }

  .close-btn {
    margin-top: 28px;

    width: 12.3077vw;
    height: 12.3077vw;
  }
}
</style>

<!-- 规则内容样式 -->
<style lang="scss">
.rich-h1 {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.rich-p {
  margin-top: 5px;

  font-size: 13px;
  color: #333;
}

.rich-ol {
  margin-top: 5px;

  padding: 0 0 0 20px;

  font-size: 13px;
  color: #333;

  .rich-li {
    margin: 5px 0;

    font-size: 13px;
    color: #333;
  }
}

.rich-table {
  margin-top: 5px;

  border-collapse: collapse;

  border: 1px solid #333;

  font-size: 13px;
  color: #333;

  .rich-tr {
    border: 1px solid #333;

    .rich-td {
      border: 1px solid #333;

      padding: 5px;
    }
  }
}
</style>
